<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

  <title>Basis Demos: Independant selection model</title>

  <link rel="stylesheet" type="text/css" title="Compat Style" href="../../style/tree/compat/style.css" media="screen" />

  <style type="text/css" id="demo-css">
    HTML,
    BODY
    {
      font-size: small;
      font-family: Tahoma, Verdana, Arial, sans-serif;
    }

    #DemoTree
    {
      border: 1px solid #AAA;
      width: 300px;
      height: 400ex;
      overflow: auto;
      overflow-y: scroll;
      overflow-x: hidden;
    }
    .green-selection UL .selected A
    {
      background-color: #00AA00 !important;
      color: white !important;
    }
    .green-selection UL A
    {
      color: #00CC00 !important;
    }
    .red-selection UL .selected A
    {
      background-color: #DD0000 !important;
      color: black !important;
    }
    .red-selection UL A
    {
      color: #DD0000 !important;
    }

  </style>
  <!--[if lt IE 7]>
  <style type="text/css">
    BODY
    {
      font-size: x-small;
    }
  </style>
  <![endif]-->

  <!--[if IE 7]>
  <![endif]-->


  <script type="text/javascript" src="../../basis.js"></script>
  <script type="text/javascript" src="../../data.js"></script>
  <script type="text/javascript" src="../../dom_wrapper.js"></script>
  <script type="text/javascript" src="../../tree.js"></script>

  <script type="text/javascript" src="../demo.js"></script>
</head>

<body>
  <h1>Basic demos: Independant selection model</h1>
  
  <p id="demo-summary">
    ..
  </p>
  <div id="demo-description">
    ..
  </div>

  <div id="demo-container"></div>

  <script type="text/javascript" id="demo-javascript">
    
    // make shortcut
    var DOM = Basis.DOM;
    var Data = Basis.Data;

    var nsTree = Basis.Controls.Tree;
    var Selection = Basis.DOM.Wrapper.Selection;

    //
    // THIS SECTION FOR AUTOMATIC SELECTION CONTENT OUTPUT AND NOT A PART OF DEMONSTATION
    //
    var selectionOutput = DOM.insert(DOM.get('demo-container'), DOM.createElement());
    var _init = Selection.prototype.init;
    Selection.prototype.init = function(config, name){
      _init.call(this, config);
      this.element = DOM.insert(selectionOutput, DOM.createElement('', DOM.createElement('LABEL', (name || 'Tree selection') + ': '), this.content = DOM.createText()));
      this.addHandler({
        change: function(){
          this.content.nodeValue = this.getItems().map(Function.getter('info.title + " " + object.document')).join(', ') || 'no items';
        }
      });
    }

    //
    // Main part
    //

    // create red selection
    var redSelection = new Selection({ multiple: true }, 'Red selection');

    // data for tree
    var data = [
      { info: { title: 'node1' } },
      { info: { title: 'node2' },
        selection: redSelection,
        cssClassName: 'red-selection',
        childNodes: [
          { info: { title: 'node2.1' } },
          { info: { title: 'node2.1' } }
        ]
      },
      { info: { title: 'node3 (Green selection holder)' },
        selection: new Selection({ multiple: true }, 'Green selection'),
        cssClassName: 'green-selection',
        childNodes: [
          { info: { title: 'node3.1' } },
          { info: { title: 'node3.2' } },
          { info: { title: 'node3.3 (Red selection holder)' },
            selection: redSelection,
            cssClassName: 'red-selection',
            childNodes: [
              { info: { title: 'node3.3.1' } },
              { info: { title: 'node3.3.2' } },
              { info: { title: 'node3.3.3' },
                childNodes: [
                  { info: { title: 'node3.3.3.1' } },
                  { info: { title: 'node3.3.3.2' } },
                  { info: { title: 'node3.3.3.3' } }
                ]
              },
              { info: { title: 'node3.3.4' } },
              { info: { title: 'node3.3.5' } }
            ]
          },
          { info: { title: 'node3.4' },
            childNodes: [
              { info: { title: 'node3.4.1' } },
              { info: { title: 'node3.4.2' } },
              { info: { title: 'node3.4.3' } }
            ]
          }
        ]
      },
      { info: { title: 'node4' } }
    ];

    // create a tree
    new nsTree.Tree({
      id: 'DemoTree',
      container: DOM.get('demo-container'),

      childFactory: function(config){
        if (config.childNodes)
          return new nsTree.TreeFolder(Object.complete({ childFactory: (this.document || this).childFactory }, config));
        else
          return new nsTree.TreeNode(config);
      },

      selection: {
        multiple: true
      },

      childNodes: data
    });

  </script>
</body>

</html>
